<template>
	<view> 
	  <u-picker
	    @cancel="closePicker"
	    @close="closePicker"
	    :show="show"
	    :columns="addressColumns"
	    @confirm="localConfirm"
	    title=" "
	    keyName="name"
	    :itemHeight="height"
	    closeOnClickOverlay
	    ref="uPicker"
	    @change="changeHandler"
	    :defaultIndex="defaultAddress"
	    immediateChange
	  ></u-picker> 
	</view>
</template>

<script>
	
	export default {
		props:{
			list:Array,
			level:{
				type:Number,
				default:1
			},
			height:{
				type:Number,
				default:40
			},
			keyId:{
				type:String,
				default:'id'
			},
			keyName:{
				type:String,
				default:'name'
			},
			keyChild:{
				type:String,
				default:'child'
			},
			showLocal:Boolean
		},
		
		watch: {
			showLocal(newVal, oldVal){
				//console.log('myProp changed from', oldVal, 'to', newVal);
				this.show=true;
			}
		},
		
		data() {
			return {
				test:false,
				show:false,
				appVersion:'',
				local: '', //区域
				localCode: '', //这个变量看个人需求使用
				addressColumns: [], //数据数组
				defaultAddress: [],  //默认选中 (回填时或者初次显示默认选中)
				addressData: [],  //原始数据 (引入的json文件)
			}
		},
		
		 //组件生命周期
		created:function(e){
			let list=this.list;
			this.addressData=list;
			//省的数组
			const provinceData = list.map(e => {
				//return { name: e.name, id: e.id }
				let prov={};
				prov[this.keyName]=e[this.keyName]
				prov[this.keyId]=e[this.keyId]
				return prov
			})
			//市的数组
			if(this.level >= 2){
				var cityData = list.map(e => {
					const arr = []
					if(e[this.keyChild]){
						arr.push(
						  e[this.keyChild].map(c => {
							 //return { name: c.name, id: c.id }
							 let city={};
							 city[this.keyName]=c[this.keyName]
							 city[this.keyId]=c[this.keyId]
							 return city
						  })
						)
					}
					return arr
				})
			}else{
				var cityData = [];
			}
			
			//区的数组
			if(this.level >= 3){
				var areaData = list.map(e => {
					const arr = []
					if(e[this.keyChild]){
						arr.push(
						  e[this.keyChild].map(c =>
							c[this.keyChild].map(d => {
								//return { name: d.name, id: d.id }
								let area={};
								area[this.keyName]=d[this.keyName]
								area[this.keyId]=d[this.keyId]
								return area
							  
							})
						  )
						)
					}
					return arr
				})
			}else{
				var areaData = [];
			}
			let arr=[];
			arr.push(provinceData);
			if(cityData.length >= 2) arr.push(cityData[0][0]);
			if(areaData.length >= 3) arr.push(areaData[0][0][0]);
			//const arr = [provinceData, cityData[0][0], areaData[0][0][0]]
			this.addressColumns = arr    //将得到的3个数组 的第一个市的所有数据赋值 作为初始数据	
		},
		methods: {
			changeHandler(e) {
				//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身
				const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e
			   //如果改变的是第一列
				if (columnIndex === 0) {
					if(!this.addressData[index][this.keyChild]){
						this.addressData[index][this.keyChild]=[];
					}
				  const children1 = this.addressData[index][this.keyChild].map(e => {
					//return { name: e.name, id: e.id }
					let children1Fild={};
					children1Fild[this.keyName]=e[this.keyName]
					children1Fild[this.keyId]=e[this.keyId]
					return children1Fild
				  })
				  if(this.level > 1){
				    picker.setColumnValues(1, children1)
				  }
				  if(this.level >= 2){
					  if(this.addressData[index][this.keyChild][indexs[1]]){
						 //更换 第二列数据
						 if(!this.addressData[index][this.keyChild][indexs[1]][this.keyChild]){
							 this.addressData[index][this.keyChild][indexs[1]][this.keyChild]=[];
						 }
						 const children2 = this.addressData[index][this.keyChild][indexs[1]][this.keyChild].map(e => {
						 	//return { name: e.name, id: e.id }
							let children2Fild={};
							children2Fild[this.keyName]=e[this.keyName]
							children2Fild[this.keyId]=e[this.keyId]
							return children2Fild
						 })
						 if(this.level >= 3){
						 	picker.setColumnValues(2, children2)
						 	//更换 第三列数据
						 }  
					  } 
				  }
				}
				if (columnIndex === 1) {
					if(this.level >= 3){
					  //如果改变的是第二列
					  if(this.addressData[indexs[0]][this.keyChild][indexs[1]]){
						  if(!this.addressData[indexs[0]][this.keyChild][indexs[1]][this.keyChild]){
							  this.addressData[indexs[0]][this.keyChild][indexs[1]][this.keyChild]=[];
						  }
						  const children3 = this.addressData[indexs[0]][this.keyChild][indexs[1]][this.keyChild].map(e => {
						  		//return { name: e.name, id: e.id }
								let children3Fild={};
								children3Fild[this.keyName]=e[this.keyName]
								children3Fild[this.keyId]=e[this.keyId]
								return children3Fild
						  })
						  picker.setColumnValues(2, children3)
						  //更换 第三列数据
					  }
				  }
				}
			},
			localConfirm(e) {
				var names=e.value[0][this.keyName];
				if(e.value[1]) names+='-'+e.value[1][this.keyName];
				if(e.value[2]) names+='-'+e.value[2][this.keyName];
				var ids=e.value[0][this.keyId];
				if(e.value[1]) ids+=','+e.value[1][this.keyId];
				if(e.value[2]) ids+=','+e.value[2][this.keyId];
				var list=[];
				var obj={};
				obj[this.keyId]=e.value[0][this.keyId];
				obj[this.keyName]=e.value[0][this.keyName];
				list.push(obj);
				if(e.value[1]) {
					obj[this.keyId]=e.value[1][this.keyId];
					obj[this.keyName]=e.value[1][this.keyName];
					list.push(obj);
				}
				if(e.value[2]) {
					obj[this.keyId]=e.value[2][this.keyId];
					obj[this.keyName]=e.value[2][this.keyName];
					list.push(obj);
				}
				this.show=false;
				let data={};
				data.list=list;
				data[this.keyId]=ids;
				data[this.keyName]=names;
				this.$emit('confirm-event', data);
			},
			closePicker(){
				this.show=false;
			},
			
		}
	}
</script>

<style lang="scss">
	 .fixed-bottom{
		 height: 80rpx;
		 line-height: 80rpx;
		 position: fixed;
		 bottom: 0;
		 left:0;
		 width: 100%;
		 background: #fff;
	 }
</style>
